<template>
    <div class="newsinfo">
        <myheader title="新闻详情" :back="true" :more="false"></myheader>
       <div class="infowrap">
           <h1>{{newsinfo.title}}</h1>
           <p class="subtitle">
               <span>发表时间：{{newsinfo.add_time | dateFormat}}</span>
               <span>点击次数：{{newsinfo.click}}</span>
           </p>
           <hr>
           <p v-html="newsinfo.content" class="content"></p>
           <comment :id="id"></comment>
       </div>
    </div>
</template>

<script>
    import myheader from '@/components/header'
    import comment from '@/components/comment'
    import { Toast } from 'mint-ui'
    export default {
        name: "newsinfo",
        data(){
            return {
                newsinfo:{}
            }
        },
        props:['id'],
        components:{
            myheader,
            comment
        },
        methods:{
            getNewsInfo(){//获取新闻详情的数据
                this.$http.get('api/getnew/'+this.id).then(response=>{//获取数据成功的回调
                    // console.log(response.body.message[0]);
                    this.newsinfo = response.body.message[0]
                },error=>{ //获取数据失败的回调
                    Toast('获取详情数据失败！！');
                })
            }
        },
        created(){//生命周期函数，页面刚加载，数据还没挂载前，会调用这个勾子函数
            this. getNewsInfo()
        }
    }
</script>

<style scoped lang="scss">
    @import "../../assets/sassstyle";
.infowrap{
padding: 0 4px 55px;
    h1{
        color: red;
        font-size: 16px;
        text-align: center;
        margin: 15px 0;
    }
    .subtitle{
        color: $theme-color;
        display: flex;
        justify-content: space-between;
    }
    .content{
        text-indent: 24px;
    }
}
</style>
